<template>
  <div class="search-container">

    <div class="input-box">
      <Input
          size="large"
          style="width: 300px"
          placeholder="遇到 bug? 搜一搜"
          v-model.trim="searchContent"
          @on-enter="enterSearch"
      @on-change="change">

        <Icon
            type="ios-search"
            slot="suffix"
            style="cursor: pointer"
            @click="search"/>
      </Input>
    </div>

  </div>
</template>

<script>
export default {
  //组件名称
  name: "Search",
  //组件注册
  components: {},
  //数据驱动
  data() {
    return {
      searchContent: ""
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    // enter 触发
    enterSearch() {
      let flag = true;
      if(this.searchContent.trim()==""){
        flag = false;
      }
      this.bus.$emit("my-event-search",{
        flag:flag
      })

    },
    //搜索
    search(){
      this.enterSearch();
    },
    //当内容改变
    change(){
      if(this.searchContent.trim()==""){
        this.bus.$emit("my-event-search",{
          flag:false
        })
      }
    }
  },
  //钩子函数
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.search-container{
  .input-box{
    margin-top:14px;
  }
}
</style>